{extend name="public/base"}

{block name="title"}
订单列表
{/block}

{block name="style"}
{css href="/static/wechat/css/Coupons.css" /}
{/block}
{block name="body"}
<div class="pageControl orderDetails">
    <div class="msui_nav msui_navTop" style="border-bottom: 1px solid #cccccc;">
        <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">优惠券</h1>
    </div>
    <div class="menu_list" >
        <!--导航-->
        <ul class="coupons_ul">
            <li dataTab="1" class="fs08 msui_tabMenu-active" data-status="0">未使用<span>({$data.unuse})</span></li>
            <li dataTab="2" class="fs08" data-status="1">已使用<span>({$data.already_use})</span></li>
            <li dataTab="3" class="fs08" data-status="2">已失效<span>({$data.already_over})</span></li>
        </ul>
        <!--滑动的div-->
        <div class="slide"></div>
    </div>
    <div class="menu_page">
        <div dataPage="1" class="js-list" data-status-list="0">

        </div>
        <div dataPage="2"  class="js-list"  data-status-list="1"  style="display: none;">

        </div>
        <div dataPage="3" class="js-list"  data-status-list="2" style="display: none;">

        </div>

        <!--<span class="fs08 mid">没有<span id="qiehuan">可用</span>的优惠券哦~</span>-->
    </div>
</div>
<!-- loading toast -->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="opacity: 1; visibility: visible;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">加载中...</p>
    </div>
</div>
{/block}
{block name="javascript"}
<!--自己的js-->
<script type="text/javascript" src="/static/wechat/js/coupons.js?v={php}time();{/php}" ></script>
<script>
    $(function () {
        var obj = {
            'is_more' : true,
            'page' : 1,
            'url' : '{:url("get_coupon_list")}',
            'status' : 0
        };
        get_coupon_list();
        $(window).scroll( function() {
            if (($(document).height() - $(this).scrollTop() - $(this).height()<50) && obj.is_more){
                get_coupon_list();
            }
        });

        $(".coupons_ul li").click(function () {
            var _this = $(this);
            obj.status = _this.data('status');
            obj.page = 1;
            get_coupon_list();
        });

        function get_coupon_list() {
            $('#loadingToast').fadeIn(100);
            obj.is_more = false;
            $.ajax({
                type : 'POST',
                url : obj.url + '?page=' + obj.page,
                data : {
                    status : obj.status
                },
                dataType : 'json',
                success : function (msg) {
                    if (msg.code == 200) {
                        $('#loadingToast').fadeOut(100);
                        if (obj.page == 1) {
                            $("div[data-status-list='"+ obj.status +"']").html(msg.tpl);
                        } else {
                            $("div[data-status-list='"+ obj.status +"']").append(msg.tpl);
                        }

                        // 计算是否还有更多数据
                        if ((msg.data.total - (msg.data.current_page * msg.data.per_page)) > 0) {
                            obj.is_more = true;
                        }
                        obj.page++;
                    } else {
                        $.alert('数据获取失败!!');
                    }
                }
            });
        }
    });
</script>
{/block}